.top-box {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top-left {
  width: 200px;
}

.top-title {
  display: flex;
  flex-direction: row;
  align-items: center;

  img {
    width: 32px;
    height: 28px;
    margin: 0px 10px 0px 0px;
  }

  span {
    font-size: 26px;
    color: #0f1525;
    font-weight: bold;
  }
}

.top-right {
  display: flex;

  li {
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;

    i {
      width: 16px;
      height: 16px;
      background: #fff;
      border: 1px solid #e8e8e8;
      display: inline-block;
      margin: 0px 8px 0px 0px;

      &.icon-kx {
        background: #a5a5a5;
      }

      &.icon-zz {
        background: #85bf4e;
      }

      &.icon-dd {
        background: #489df0;
      }

      &.icon-zs {
        background: #f96d4c;
      }
    }
  }
}

.zuoxi {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 0px 40px 0px;
}

.zx-item {
  min-width: 260px;
  min-height: 185px;
  box-shadow: 1px 1px 6px 2px rgba(19, 19, 19, 0.3);
  border-radius: 2px;
  margin: 10px 10px;
  padding: 14px 20px 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.zx-img {
  width: 66px;
  height: 66px;
  margin: 0px 0px 20px 0px;
}

.zxi-free {
  color: #a5a5a5;
}


.null-txt {
  background: #a5a5a5;
}

.wait {
  background: #489df0;
}

.leave {
  background: #f96d4c;
}

.work {
  background: #85bf4e;
}

.zx-info {
  color: #ffffff;

  .zxi-left {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin: 0px 10px 0px 0px;
  }
}
